<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索区域 -->
    <van-search
      v-model="key"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <!-- 搜索建议区域 -->
    <van-cell-group v-if="key">
      <van-cell
        v-for="(item, index) in colorSuggestList"
        :key="index"
        icon="search"
      >
        <div v-html="item" @click="$router.push({ name:'result', query: { key: suggestList[index] } })"></div>
      </van-cell>
    </van-cell-group>

    <!-- 搜索历史区域 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell v-for="(item,index) in historyList" :key="index" :title="item"/>
    </van-cell-group>
  </div>
</template>

<script>
// 导入接口
import { suggestAPI } from "@/api/search";
export default {
    name:"search",
  data() {
    return {
      key: "",
      // 保存建议的数组
      suggestList: [],
      // 保存历史记录的数组
      historyList: JSON.parse(window.localStorage.getItem('history86')) || []
    };
  },

  computed: {

      colorSuggestList () {

        return this.suggestList.map(v => v.replaceAll(this.key,`<span style="color:red;">${this.key}</span>`))
      }
  },

  methods: {
    // 搜索框内容发生改变的事件
    async onInput() {

      if (this.key == "") return;
      // 发请求获取联想建议
      const res = await suggestAPI({
        q: this.key,
      });

      // 真实开发，这个问题应该反馈到后端，没数据就给我返回一个数组，还给返回有一个元素，但是这个元素为null
      if (res.data.options[0]) {
        // 保存到数组里
        this.suggestList = res.data.options;
      }else {
          this.suggestList = []
      }
    },

    // 确定搜索的事件
    onSearch() {
       
       // 非空判断
       if (this.key == '') return this.$toast('请输入搜索内容')

       // 判断输入的内容在不在数组里
       const idx = this.historyList.indexOf(this.key)
       if (idx != -1) {
           this.historyList.splice(idx, 1)
       }
       // 把输入的内容存到数组里
       this.historyList.unshift(this.key)
       // 把搜索的内容存到本地存储
       window.localStorage.setItem('history86', JSON.stringify(this.historyList))

       // 跳转到搜索结果页面进行搜索
       this.$router.push({
           name: 'result',
           query: {
               key: this.key
           }
       })
    },
  },
};
</script>

<style>
</style>